<template>
	<div>
		<div>
			<el-card>
				<van-row>
					<div style="margin-right: 3vw;">
						<van-image width="6vw" height="6vw" fit="cover" :src="urlIp+'/'+order.goods.user.headImgSrc"
							round />
					</div>
					<strong style="color: black;line-height: 6vw;">
						{{order.goods.user.userName}}
					</strong>
				</van-row>
				<div>
					<strong>
						{{order.goods.name}}
					</strong>
				</div>
				<van-text-ellipsis :content="order.goods.describes" expand-text="展开" collapse-text="收起" />
			</el-card>
		</div>
		<div style="color: black;padding: 1vh;">
			<div>
				<div>
					<div>
						<strong>
							数量:
						</strong>
						x{{order.number}}
					</div>
				</div>
			</div>
			<span>
				<strong>
					订单编号：
				</strong>
				{{order.id}}
			</span>
			<br />
			<span>
				<strong>
					下单时间：
				</strong>
				{{order.startTime}}
			</span>
			<div style="text-align: right; font-size: 2vh;">
				<span>价格：<strong style="color: red;font-size: 1.5rem;">&yen;{{priceShow}}</strong></span> <br />
				<span>状态：
					<strong>
						{{statuName[order.status]}}
					</strong>
					<div style="margin-top: 0.5rem;" v-if="order.status===0">
						<van-button round type="danger" @click="pay">立即支付</van-button>
					</div>
					<div style="margin-top: 0.5rem;" v-if="(order.status===3)||(order.status===2)">
						<van-button round type="success" @click="confirmReceipt">确认收货</van-button>
					</div>
				</span>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		showConfirmDialog,
		showNotify
	} from 'vant';

	import url from '@/assets/url.json';

	export default {
		props: {
			order: Object,
			showPayWay: Function
		},
		data() {
			return {
				urlIp: url.ip,
				statuName: [
					"未支付",
					"",
					"未发货",
					"已发货",
					"已完成",
					"已停止"
				],
				priceShow: ''
			}
		},

		mounted() {
			this.priceShow = this.changePriceType(this.order.money)
		},
		methods: {
			changePriceType(str) {
				let numberPrice = Number.parseInt(str);
				if (numberPrice < 10) {
					str = '00' + str;
				} else {
					if (numberPrice < 100) {
						str = '0' + str;
					}
				}
				let arr = str.split('');
				arr.splice(-2, 0, '.');
				let tstr = arr.join('');
				return tstr;
			},
			pay() {
				this.showPayWay(this.priceShow, this.order.id, this.order.goods.user);
			},
			confirmReceipt() {
				showConfirmDialog({
						title: '是否确认收货?',
						message: '商品名:' + this.order.goods.name,
					})
					.then(() => {
						this.$axios({
							url: url.ip + '/api-goods' + '/orderGoods/updateOrder',
							method: 'PUT',
							data: {
								id: this.order.id,
								status: 'FINISH',
							},
							headers: {
								token: this.$cookies.get('token'),
							}
						}).then((res) => {
							if (res.data.code !== 0) {
								showNotify({
									type: 'danger',
									message: res.data.message
								});
							} else {
								showNotify({
									type: 'success',
									message: "确认收货成功"
								});
							}
						}).catch((err) => {
							console.log(err);
							showNotify({
								type: 'danger',
								message: "网络错误或未登录"
							});
						})
					})
					.catch(() => {
						showNotify({
							type: 'warning',
							message: "已取消确认收货"
						});
					});
			}
		}
	}
</script>

<style>
</style>